<template>
  <div>
      <div class="shop-body">
          <div class="header"></div>
          <div class="shopcon">
              <div class="shopcon-header" v-on:click="change()">
                  <div class="shopcon-left">筛选</div>
                  <div class="shopcon-right">排序.按销量</div>

                  <div v-bind:class="{current:show}">
                      <div class="current-top"></div>
                      <div class="current-bottom">
                      <span id="btn" v-bind:class="{current:show}">x</span>
                      <p class="current-txt1">排序</p>
                      <p class="current-txt">综合</p>
                      <p class="current-txt">按销量</p>
                      <p class="current-txt">按价格-由低到高</p>
                      <p class="current-txt">按价格-由高到低</p>
                      </div>
                  </div>                    
              </div>
              <div class="shopcon-header2">
                  <div class="shopcon-headermin">商品分类</div>  
              </div>
              <ul>
                  <li v-for="(item,index) in list">
                      <img :src="item.url" alt="">
                        <span class="tips3">{{item.tips3}}</span>
                  </li>
              </ul>
          </div>
      </div>
      
  </div>
</template>
<style>
 *{
     padding: 0px;
     margin: 0px;
     list-style-type: none;
     box-sizing: border-box;
 }
 .shop-body .header{
     width: 100%;
     height: 0px;
     background:white;
     border-bottom: 0px;

 }
 .shop-body .shopcon{
     width:94%;
     margin: 0px auto;
     background:#f7f7f7;
     border-top: 5px solid #f7f7f7;
     
 }
 .shopcon-header{
     height: 50px;
 }

 ul{
     margin-bottom: 0px;
 }
 .shopcon ul{
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content:space-between;
     
 }
.shopcon ul li{
      width: 50%;
      height: 305px;
      border: 2px solid #f7f7f7;
      background: white;
      margin-left: 0px;
      margin:0 0 0 0;
      line-height: 18px;
      text-align: left;
   
}
.shopcon  img{
    width: 130px;
    display: block;
    margin: 10px auto 20px;
}

.tips3{
    display: block;
    margin-top: 100px;
}
/* -------------弹出框--------------------------------- */
.current{
  position: fixed;
  z-index: 500;
  top: 0px;
  left: 0px;
  display: none;
}
.current-top{ 
  width: 500px; 
  height: 60%;
  background:rgba(77, 75, 75, 0.8); 
  position: fixed;
  top: 0px;
  left: 0px;
}
.current-bottom{
  width: 500px;
  height: 40%;
  background:white;
  position: fixed;
  left: 0px;
  bottom: 0px;
  z-index: 500;
}
#btn{
  position: fixed;
  right: 0px;
  font-size: 20px;
  color: white;
  top: 55%;
  right: 10px;
  width: 20px;
  height: 40px;
}
.current-txt{
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    padding-left: 20px;
    color:gray;
    
}
.current-txt1{
    font-size: 15px;
    padding-left: 20px;
}
.current-txt:hover{
    border-left:5px solid orange;
}
.shopcon-header2{
    padding: 5px 20px;
    height: 50px;
    background: white;
}
.shopcon-headermin{
    height: 38px;
    line-height: 38px;
    font-size: 17px;
    border: 1px solid #f7f7f7;
}
</style>
<script>
export default{
	data(){
		return{
             list:[],
            show:true,
		 	}
        },
    methods:{
        change(){
            this.show=!this.show
    },
        chan(){
            this.show=!this.show
    }
    
  },        
	mounted(){
            var _this=this;
            this.$http.get('./data/tab3.json') 
                .then((response)=> {
                console.log(response);
                this.list=response.data.list;
                // this.postagelist=response.data.postagelist;
                 console.log(this.list)
                    // console.log(this.postagelist)
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            }) 
            }           
}
</script>